<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Flex</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.bigbox{
				display: flex;   /* 把父盒子设置为flex容器 */ 
				/* 改变主轴
				 row:水平，从左往右
				 row-reverse：反转 从右往左
				 column:垂直，从上往下
				 column-reverse：垂直，从下往上
				 */
				/* flex-direction: row; */
				/* 换行 
				nowrap:不换行
				wrap：换行
				wrap-reverse：反转换行
				*/
				/* flex-wrap: wrap; */
				/* 复合写法 */
				flex-flow:row wrap;
				/* 决定项目在主轴的对齐方式:
				flex-start:沿主轴的开始位置对齐,默认值
				flex-end:沿主轴的结束位置对齐
				center:居中 
				space-between:两端对齐
				space-around:环绕对齐/拉手对齐
				*/
			   /* justify-content: center; */
			   justify-content: space-between;
			   /* 决定项目在交叉轴上的对齐方式
			   flex-start:在交叉轴的开始位置
			   flex-end:在交叉轴的结束位置 
			   center:居中
			   */
				align-items: center;
				/* 多条轴线的对齐方式:
				 flex-start:沿交叉轴的开始位置对齐
				 flex-end:沿交叉轴的结束位置对齐
				 center:垂直交叉轴上居中对齐
				 space-between:沿交叉轴的两端对齐
				 space-around:沿交叉轴的环绕对齐
				 */
				/* align-content: space-between; */
				width: 800px;
				height: 700px;
				border: 1px solid cadetblue;
				margin: auto;
			}
			.bigbox div{
				width: 200px;
				height: 300px;
				border: 1px solid black;
				font-size: 30px;
				text-align:center;
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="bigbox">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
	</body>
</html>
